<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>index</title>
</head>

<body>
  <div>
    <h1>用户管理界面</h1>
    <button id="exit">退出登录</button>
    <div>
      用户名：<input type="text" id="username">
    </div>
    <div>
      密码：<input type="password" id="password">
    </div>
    <div>
      年龄：<input type="number" id="age">
    </div>
    <div>
      <button id="register">注册</button>
      <button id="update">更新</button>
      <button id="del">删除</button>
    </div>
    <hr />
    <table border="1">
      <thead>
        <tr>
          <td>ID</td>
          <td>用户名</td>
          <td>年龄</td>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
  <script>
    var register = document.querySelector('#register');
    var exit = document.querySelector('#exit');
    var update = document.querySelector('#update');
    var del = document.querySelector('#del');
    var username = document.querySelector('#username');
    var password = document.querySelector('#password');
    var age = document.querySelector('#age');
    var tbody = document.querySelector('tbody');

    register.onclick = () => {
      fetch('/api/person/add', {
        method: 'POST',
        body: JSON.stringify({
          username: username.value,
          password: password.value,
          age: age.value,
        }),
        headers: {
          'Content-Type': "application/json"
        }
      }).then(res => res.json()).then(res => {
        console.log(res)
        if(res.statusCode === '401') {
          window.location.href = '/login'
        }
        getList();
      })
    }

    exit.onclick = () => {
      fetch('/api/logout').then(res => res.json()).then(res => {
        console.log(res)
        if(res.status === 'success') {
          window.location.href = '/login'
        }
      })
    }

    update.onclick = () => {
      fetch('/api/person/update', {
        method: 'POST',
        body: JSON.stringify({
          _id: '63451e27635dbba6a0f266e8',
          username: '手动更新',
          password: '手动更新',
          age: 0,
        }),
        headers: {
          'Content-Type': "application/json"
        }
      }).then(res => res.json()).then(res => {
        console.log(res)
      })
    }

    del.onclick = () => {
      fetch('/api/person/del', {
        method: 'POST',
        body: JSON.stringify({
          _id: '63451e27635dbba6a0f266e8',
        }),
        headers: {
          'Content-Type': "application/json"
        }
      }).then(res => res.json()).then(res => {
        console.log(res)
      })
    }

    getList();
    // 查询全部
    function getList() {
      fetch('/api/person/list').then(res => res.json()).then(res => {
        console.log(res)
        tbody.innerHTML = res.data.map(item => {
          return `
              <tr>
                <td>${item._id}</td>
                <td>${item.username}</td>
                <td>${item.age}</td>
              </tr>
            `
        }).join("")
      })
    }
        // 查询单个
        // fetch('/api/person/list/6344d99ffa5a69d72150ee8c').then(res => res.json()).then(res => {
        //   console.log(res)
        // })
  </script>
</body>

</html>